Hotfix issue with selecting empty accounts when HW scanning (#4184)

* Fix a bug with selecting empty accounts when HW scanning

* Add test

jest_config/__fixtures__/hdWallet.ts

@@ -0,0 +1,27 @@
+import { DWAccountDisplay, ExtendedDPath } from '@services/WalletService/deterministic';
+import { TAddress } from '@types';
+
+import { fAccount } from './account';
+
+const addressToTestWith = fAccount.address as TAddress;
+
+export const fExtendedDPath: ExtendedDPath = {
+  name: 'Ledger (ETH)',
+  path: "m/44'/60'/0'",
+  offset: 0,
+  numOfAddresses: 1
+};
+
+export const fDWAccountDisplayPreBalance: DWAccountDisplay = {
+  address: addressToTestWith,
+  pathItem: {
+    baseDPath: fExtendedDPath,
+    path: "m/44'/60'/0'/0",
+    index: 0
+  }
+};
+
+export const fDWAccountDisplay: DWAccountDisplay = {
+  ...fDWAccountDisplayPreBalance,
+  balance: '0'
+};

jest_config/__fixtures__/index.ts

@@ -61,3 +61,4 @@ export * from './swapQuote';
 export { fBalances } from './balances';
 export * from './ens';
 export * from './nft';
+export * from './hdWallet';

src/features/AddAccount/components/HDWList.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { LEDGER_ETH } from '@mycrypto/wallets';
+import { fireEvent, simpleRender, waitFor } from 'test-utils';
+
+import { fAssets, fDWAccounts, fNetwork } from '@fixtures';
+import { translateRaw } from '@translations';
+
+import HDWList from './HDWList';
+
+function getComponent(props: React.ComponentProps<typeof HDWList>) {
+  return simpleRender(<HDWList {...props} />);
+}
+
+const defaultProps = {
+  scannedAccounts: fDWAccounts,
+  asset: fAssets[0],
+  isCompleted: true,
+  network: fNetwork,
+  displayEmptyAddresses: true,
+  selectedDPath: LEDGER_ETH,
+  onScanMoreAddresses: jest.fn(),
+  onUnlock: jest.fn(),
+  handleUpdate: jest.fn()
+};
+
+describe('HDWList', () => {
+  beforeEach(() => {
+    window.URL.createObjectURL = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('can render', () => {
+    const props = { ...defaultProps };
+    const { getByText } = getComponent(props);
+    expect(
+      getByText(translateRaw('DETERMINISTIC_SEE_SUMMARY'), { exact: false })
+    ).toBeInTheDocument();
+  });
+
+  it('can select/unselect address', async () => {
+    const props = { ...defaultProps };
+    const { getByText, getByTestId } = getComponent(props);
+    const testId = `row-${fDWAccounts[1].address}`;
+    const address = getByTestId(testId);
+    fireEvent.click(address);
+    await waitFor(() =>
+      expect(
+        getByText(translateRaw('DETERMINISTIC_SCANNING_EMPTY_ADDR', { $count: '1', $total: '5' }), {
+          exact: false
+        })
+      ).toBeInTheDocument()
+    );
+
+    const address2 = getByTestId(testId);
+    fireEvent.click(address2);
+    await waitFor(() =>
+      expect(
+        getByText(translateRaw('DETERMINISTIC_SCANNING_EMPTY_ADDR', { $count: '0', $total: '5' }), {
+          exact: false
+        })
+      ).toBeInTheDocument()
+    );
+  });
+});

src/features/AddAccount/components/HDWList.tsx

@@ -151,25 +151,18 @@ export default function HDWList({
   };
 
   const handleSelection = (account: TableAccountDisplay) => {
+    const filtered = tableAccounts.filter(
+      (a) =>
+        a.pathItem.index !== account.pathItem.index ||
+        a.pathItem.baseDPath.path !== account.pathItem.baseDPath.path
+    );
     if (account.isSelected) {
-      setTableAccounts({
-        ...tableAccounts,
-        [account.address]: {
-          ...account,
-          isSelected: !account.isSelected
-        }
-      });
+      setTableAccounts([...filtered, { ...account, isSelected: !account.isSelected }]);
       return;
     }
     // disallows selecting an account that is empty if MAX_EMPTY_ADDRESSES is already met
     if (emptySelectedAccounts.length >= MAX_EMPTY_ADDRESSES && !hasBalance(account.balance)) return;
-    setTableAccounts({
-      ...tableAccounts,
-      [account.address]: {
-        ...account,
-        isSelected: !account.isSelected
-      }
-    });
+    setTableAccounts([...filtered, { ...account, isSelected: !account.isSelected }]);
   };
   return (
     <ListContainer variant="columnAlign" justifyContent="center">

src/features/AddAccount/components/HDWTable.tsx

@@ -337,7 +337,12 @@ const HDTable = ({
       ) : (
         <Body>
           {accountsToDisplay.map((account: TableAccountDisplay, index) => (
-            <Row key={index} onClick={() => onSelect(account)} isSelected={account.isSelected}>
+            <Row
+              key={index}
+              onClick={() => onSelect(account)}
+              isSelected={account.isSelected}
+              data-testid={`row-${account.address}`}
+            >
               <SelectedContainer isSelected={account.isSelected}>
                 <Icon type="check" />
               </SelectedContainer>

src/features/AddAccount/components/hdWallet.slice.test.ts

@@ -1,10 +1,17 @@
 import { DeterministicWallet } from '@mycrypto/wallets';
 import { expectSaga, mockAppState } from 'test-utils';
 
-import { fAccount, fAssets, fNetwork, fNetworks } from '@fixtures';
-import { DWAccountDisplay, ExtendedDPath, getWallet } from '@services/WalletService';
+import {
+  fAssets,
+  fDWAccountDisplay,
+  fDWAccountDisplayPreBalance,
+  fExtendedDPath,
+  fNetwork,
+  fNetworks
+} from '@fixtures';
+import { getWallet } from '@services/WalletService';
 import { AppState } from '@store/root.reducer';
-import { DPathFormat, TAddress, WalletId } from '@types';
+import { DPathFormat, WalletId } from '@types';
 import { bigify as mockBigify, noOp } from '@utils';
 
 import {
@@ -37,28 +44,6 @@ const {
   addCustomDPaths,
   triggerComplete
 } = slice.actions;
-const addressToTestWith = fAccount.address as TAddress;
-
-const fExtendedDPath: ExtendedDPath = {
-  name: 'Ledger (ETH)',
-  path: "m/44'/60'/0'",
-  offset: 0,
-  numOfAddresses: 1
-};
-
-const fDWAccountDisplayPreBalance: DWAccountDisplay = {
-  address: addressToTestWith,
-  pathItem: {
-    baseDPath: fExtendedDPath,
-    path: "m/44'/60'/0'/0",
-    index: 0
-  }
-};
-
-const fDWAccountDisplay: DWAccountDisplay = {
-  ...fDWAccountDisplayPreBalance,
-  balance: '0'
-};
 
 describe('HD Wallet Slice', () => {
   const err = {