feat: Fix plan 835 Hid request dialog keep on prompting up during pagination.

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');
+    });
+  });
 });