feat: Fix plan 835 Hid request dialog keep on prompting up during pagination. (#30384)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->
This PR is relative to solve the [plan
835](MetaMask/accounts-planning#835)

This PR including following change:
1. in actions.js file, change `connectHardware` method signature to has
extra `loadHid` boolean parameter to see whether we need to load HID
request prompt up.
2. change `connect-hardware/index.js` to and pass `loadHid = true`
parameter value to above actions.
3. change `connect-hardware/account-list.js` and all pagination feature
relative functions to pass `loadHid = false` to disable HID request
popup apear.

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
5. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30384?quickstart=1)

## **Related issues**

Fixes: MetaMask/accounts-planning#835

## **Manual testing steps**

This test requires a Ledger hardware device with more than 5 accounts: 

1. Add hardware wallet 
2. Connect to Ledger device
3. Verify 5 Ledger accounts are displayed
4. Click Next
5. Verify the HID popup is not displayed each time the user clicks Next
button

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

The following popup is displayed after each "Next" action 


![412918093-ba1553a7-e3ba-42f6-bf7d-99b84473fcab](https://github.com/user-attachments/assets/86545f55-be52-4d58-a451-da4a3e010d4e)

### **After**

The popup is not displayed repeatedly

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Michele Esposito <[email protected]>

Author: dawnseeker8

ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ConnectHardwareForm should match snapshot 1`] = `
+exports[`ConnectHardwareForm matchs snapshot 1`] = `
 <div>
   <div
     class="mm-box new-external-account-form mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"

ui/pages/create-account/connect-hardware/account-list.js

@@ -19,14 +19,14 @@ class AccountList extends Component {
   goToNextPage = () => {
     // If we have < 5 accounts, it's restricted by BIP-44
     if (this.props.accounts.length === 5) {
-      this.props.getPage(this.props.device, 1, this.props.selectedPath);
+      this.props.getPage(this.props.device, 1, this.props.selectedPath, false);
     } else {
       this.props.onAccountRestriction();
     }
   };
 
   goToPreviousPage = () => {
-    this.props.getPage(this.props.device, -1, this.props.selectedPath);
+    this.props.getPage(this.props.device, -1, this.props.selectedPath, false);
   };
 
   setPath(pathValue) {

ui/pages/create-account/connect-hardware/index.js

@@ -149,7 +149,7 @@ class ConnectHardwareForm extends Component {
     }
 
     // Default values
-    this.getPage(device, 0, this.props.defaultHdPaths[device]);
+    this.getPage(device, 0, this.props.defaultHdPaths[device], true);
   };
 
   onPathChange = (path) => {
@@ -185,9 +185,9 @@ class ConnectHardwareForm extends Component {
     }, SECOND * 5);
   }
 
-  getPage = (device, page, hdPath) => {
+  getPage = (device, page, hdPath, loadHid) => {
     this.props
-      .connectHardware(device, page, hdPath, this.context.t)
+      .connectHardware(device, page, hdPath, loadHid, this.context.t)
       .then((accounts) => {
         if (accounts.length) {
           // If we just loaded the accounts for the first time
@@ -475,8 +475,10 @@ const mapDispatchToProps = (dispatch) => {
     setHardwareWalletDefaultHdPath: ({ device, path }) => {
       return dispatch(actions.setHardwareWalletDefaultHdPath({ device, path }));
     },
-    connectHardware: (deviceName, page, hdPath, t) => {
-      return dispatch(actions.connectHardware(deviceName, page, hdPath, t));
+    connectHardware: (deviceName, page, hdPath, loadHid, t) => {
+      return dispatch(
+        actions.connectHardware(deviceName, page, hdPath, loadHid, t),
+      );
     },
     checkHardwareStatus: (deviceName, hdPath) => {
       return dispatch(actions.checkHardwareStatus(deviceName, hdPath));

ui/pages/create-account/connect-hardware/index.test.tsx

@@ -1,7 +1,8 @@
-import configureMockStore from 'redux-mock-store';
 import { fireEvent, waitFor } from '@testing-library/react';
 import thunk from 'redux-thunk';
 import React from 'react';
+import configureMockStore from 'redux-mock-store';
+
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import {
   LedgerTransportTypes,
@@ -50,6 +51,7 @@ const mockProps = {
   hideAlert: () => jest.fn(),
   unlockHardwareWalletAccount: () => jest.fn(),
   setHardwareWalletDefaultHdPath: () => jest.fn(),
+  connectHardware: () => mockConnectHardware,
   history: {
     push: mockHistoryPush,
   },
@@ -95,7 +97,7 @@ const mockState = {
 describe('ConnectHardwareForm', () => {
   const mockStore = configureMockStore([thunk])(mockState);
 
-  it('should match snapshot', () => {
+  it('matchs snapshot', () => {
     const { container } = renderWithProvider(
       <ConnectHardwareForm {...mockProps} />,
       mockStore,
@@ -104,7 +106,7 @@ describe('ConnectHardwareForm', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should close the form when close button is clicked', () => {
+  it('closes the form when close button is clicked', () => {
     const { getByTestId } = renderWithProvider(
       <ConnectHardwareForm {...mockProps} />,
       mockStore,
@@ -116,7 +118,7 @@ describe('ConnectHardwareForm', () => {
   });
 
   describe('U2F Error', () => {
-    it('should render a U2F error', async () => {
+    it('renders a U2F error', async () => {
       mockConnectHardware.mockRejectedValue(new Error('U2F Error'));
       const mockStateWithU2F = Object.assign(mockState, {});
       mockStateWithU2F.appState.ledgerTransportType = LedgerTransportTypes.u2f;
@@ -146,7 +148,7 @@ describe('ConnectHardwareForm', () => {
       });
     });
 
-    it('should render a different U2F error for firefox', async () => {
+    it('renders a different U2F error for firefox', async () => {
       jest
         .spyOn(window.navigator, 'userAgent', 'get')
         .mockReturnValue(
@@ -180,7 +182,7 @@ describe('ConnectHardwareForm', () => {
   });
 
   describe('QR Hardware Wallet Steps', () => {
-    it('should render the QR hardware wallet steps', async () => {
+    it('renders the QR hardware wallet steps', async () => {
       const { getByText, getByLabelText } = renderWithProvider(
         <ConnectHardwareForm {...mockProps} />,
         mockStore,
@@ -203,7 +205,7 @@ describe('ConnectHardwareForm', () => {
   });
 
   describe('Select Hardware', () => {
-    it('should check link buttons for Ngrave Zero brand', async () => {
+    it('checks link buttons for Ngrave Zero brand', async () => {
       window.open = jest.fn();
 
       const { getByLabelText, getByTestId } = renderWithProvider(
@@ -226,4 +228,86 @@ describe('ConnectHardwareForm', () => {
       expect(window.open).toHaveBeenCalled();
     });
   });
+
+  describe('getPage method', () => {
+    beforeEach(() => {
+      mockConnectHardware.mockReset();
+    });
+
+    it('calls connectHardware with loadHid=true', async () => {
+      mockConnectHardware.mockReset();
+
+      const mockAccounts = [
+        { address: '0xAddress1', balance: null, index: 0 },
+        { address: '0xAddress2', balance: null, index: 1 },
+      ];
+      mockConnectHardware.mockResolvedValue(mockAccounts);
+
+      renderWithProvider(<ConnectHardwareForm {...mockProps} />, mockStore);
+
+      const hdPath = "m/44'/60'/0'/0";
+      const deviceName = 'ledger';
+      const pageIndex = 0;
+      const loadHidValue = true;
+
+      await mockConnectHardware(
+        deviceName,
+        pageIndex,
+        hdPath,
+        loadHidValue,
+        jest.fn(),
+      );
+
+      expect(mockConnectHardware).toHaveBeenCalledWith(
+        deviceName,
+        pageIndex,
+        hdPath,
+        loadHidValue,
+        expect.any(Function),
+      );
+    });
+
+    it('calls connectHardware with loadHid=false', async () => {
+      mockConnectHardware.mockReset();
+
+      const mockAccounts = [
+        { address: '0xAddress1', balance: null, index: 0 },
+        { address: '0xAddress2', balance: null, index: 1 },
+      ];
+      mockConnectHardware.mockResolvedValue(mockAccounts);
+
+      renderWithProvider(<ConnectHardwareForm {...mockProps} />, mockStore);
+
+      const hdPath = "m/44'/60'/0'/0";
+      const deviceName = 'ledger';
+      const pageIndex = 0;
+      const loadHidValue = false;
+
+      await mockConnectHardware(
+        deviceName,
+        pageIndex,
+        hdPath,
+        loadHidValue,
+        jest.fn(),
+      );
+
+      expect(mockConnectHardware).toHaveBeenCalledWith(
+        deviceName,
+        pageIndex,
+        hdPath,
+        loadHidValue,
+        expect.any(Function),
+      );
+    });
+
+    it('handles errors when connectHardware fails', async () => {
+      const testError = new Error('Test Error');
+      mockConnectHardware.mockReset();
+      mockConnectHardware.mockRejectedValue(testError);
+
+      renderWithProvider(<ConnectHardwareForm {...mockProps} />, mockStore);
+
+      await expect(mockConnectHardware()).rejects.toThrow('Test Error');
+    });
+  });
 });