Create redux state for hardware wallet

.eslintrc

@@ -100,7 +100,7 @@
         "newIsCapExceptions": ["mnemonic"]
       }
     ],
-
+    "no-constant-condition": ["error", { "checkLoops": false }],
     "react/prop-types": "off",
     "no-plusplus": "off",
     "no-underscore-dangle": "off",

libs/hwServer/index.js

@@ -66,7 +66,7 @@ export class HwServer {
 
   async selectDevice({ id }) {
     this.currentDeviceId = id;
-    this.deviceUpdate();
+    this.deviceUpdate(id);
     return this.currentDeviceId;
   }
 
@@ -111,7 +111,10 @@ export class HwServer {
     const { sender } = this.pubSub;
     this.devices.push(device);
     this.syncDevices();
-    publish(sender, { event: IPC_MESSAGES.HW_CONNECTED, payload: { model: device.model } });
+    publish(sender, {
+      event: IPC_MESSAGES.HW_CONNECTED,
+      payload: { model: device.model, devices: this.devices },
+    });
   }
 
   /**

setup/react/app/index.js

@@ -29,6 +29,7 @@ import {
   useCurrentApplication,
 } from 'src/modules/blockchainApplication/manage/hooks';
 import './variables.css';
+import useHwListener from "src/modules/hardwareWallet/hooks/useHwListener";
 import styles from './app.css';
 
 if (MOCK_SERVICE_WORKER) {
@@ -45,7 +46,7 @@ const App = ({ history }) => {
   const { data: chainMetaData, isLoading } = useBlockchainApplicationMeta();
   const { setApplication } = useApplicationManagement();
   const [, setCurrentApplication] = useCurrentApplication();
-
+  useHwListener();
   useIpc(history);
 
   useEffect(() => {

src/locales/en/common.json

@@ -113,6 +113,7 @@
   "Claim reward": "Claim reward",
   "Claim rewards": "Claim rewards",
   "Clear all filters": "Clear all filters",
+  "Click here to select a hardware wallet": "Click here to select a hardware wallet",
   "Click to hide full and old addresses": "Click to hide full and old addresses",
   "Click to hide the full address": "Click to hide the full address",
   "Click to see full and old addresses": "Click to see full and old addresses",

src/modules/hardwareWallet/components/SelectHardwareDeviceModal/SelectHardwareDeviceModal.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Dialog from '@theme/dialog/dialog';
+import BoxHeader from 'src/theme/box/header';
+import Box from '@theme/box';
+
+function SelectHardwareDeviceModal() {
+  return (
+    <Dialog>
+      <Box>
+        <BoxHeader>
+          <h1>Switch account</h1>
+        </BoxHeader>
+      </Box>
+    </Dialog>
+  );
+}
+
+export default SelectHardwareDeviceModal;

src/modules/hardwareWallet/components/SelectHardwareDeviceModal/SelectHardwareDeviceModal.test.js

@@ -0,0 +1,10 @@
+import { screen } from '@testing-library/react';
+import {renderWithRouter} from "src/utils/testHelpers";
+import SelectHardwareDeviceModal from './SelectHardwareDeviceModal';
+
+describe('SelectHardwareDeviceModal', () => {
+  it('Should show Switch account in the title', () => {
+    renderWithRouter(SelectHardwareDeviceModal);
+    expect(screen.getByText('Switch account')).toBeTruthy();
+  });
+});

src/modules/hardwareWallet/components/SelectHardwareDeviceModal/index.js

@@ -0,0 +1,4 @@
+import SelectHardwareDeviceModal
+  from "src/modules/hardwareWallet/components/SelectHardwareDeviceModal/SelectHardwareDeviceModal";
+
+export default SelectHardwareDeviceModal;

src/modules/hardwareWallet/hooks/useHWAccounts.js

@@ -1,5 +1,5 @@
 import { useSelector } from 'react-redux';
-import { selectHWAccounts } from 'src/redux/selectors';
+import { selectHWAccounts } from '@hardwareWallet/store/selectors/hwSelectors';
 
 const useHWAccounts = () => {
   const hwAccounts = useSelector(selectHWAccounts);

src/modules/hardwareWallet/hooks/useHwListener.js

@@ -0,0 +1,28 @@
+import { useDispatch } from 'react-redux';
+import { useEffect } from 'react';
+import { IPC_MESSAGES } from '@libs/hwServer/constants';
+import {
+  setHardwareWalletDevices,
+  setCurrentDevice,
+} from 'src/modules/hardwareWallet/store/actions';
+
+const { DEVICE_LIST_CHANGED, DEVICE_UPDATE } = IPC_MESSAGES;
+
+function useHwListener() {
+  const dispatch = useDispatch();
+
+  const { ipc } = window;
+
+  if (!ipc) return;
+
+  useEffect(() => {
+    ipc.on(DEVICE_LIST_CHANGED, (action, data) => {
+      dispatch(setHardwareWalletDevices(data));
+    });
+    ipc.on(DEVICE_UPDATE, (action, data) => {
+      dispatch(setCurrentDevice(data));
+    });
+  }, []);
+}
+
+export default useHwListener;

src/modules/hardwareWallet/hooks/useHwListener.test.js

@@ -0,0 +1,58 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useDispatch } from 'react-redux';
+import { IPC_MESSAGES } from '@libs/hwServer/constants';
+import {setHardwareWalletDevices, setCurrentDevice} from "@hardwareWallet/store/actions";
+import useHwListener from './useHwListener';
+
+const { DEVICE_LIST_CHANGED, DEVICE_UPDATE } = IPC_MESSAGES;
+
+const mockDispatch = jest.fn();
+useDispatch.mockReturnValue(mockDispatch);
+
+describe('useIpc', () => {
+  const callbacks = {};
+  const ipc = {
+    on: jest.fn((event, callback) => {
+      callbacks[event] = callback;
+    }),
+  };
+
+  beforeEach(() => {
+    mockDispatch.mockClear();
+    window.ipc = ipc;
+  });
+
+  afterEach(() => {
+    delete window.ipc;
+  });
+
+  it('Should return undefined if no ipc on window', () => {
+    const { result, rerender } = renderHook(() => useHwListener());
+    act(() => {
+      delete window.ipc;
+    });
+    rerender();
+
+    expect(result.current).toBe(undefined);
+  });
+
+  it('Should dispatch setDeviceUpdated when ipc receives DEVICE_LIST_CHANGED', () => {
+    expect(ipc.on).toHaveBeenCalled();
+    const devices = [{ deviceId: '1' }];
+
+    callbacks[DEVICE_LIST_CHANGED]({}, devices);
+    expect(mockDispatch).toHaveBeenCalledWith(
+      setHardwareWalletDevices(devices)
+    );
+  });
+
+  it('Should dispatch setDeviceUpdated when ipc receives DEVICE_UPDATE', () => {
+    expect(ipc.on).toHaveBeenCalled();
+    const device = {deviceId: '1'};
+
+    callbacks[DEVICE_UPDATE]({}, device);
+    expect(mockDispatch).toHaveBeenCalledWith(
+      setCurrentDevice(device)
+    );
+  });
+});

src/modules/hardwareWallet/hooks/useManageHWAccounts.js

@@ -1,15 +1,16 @@
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectSettings, selectHW } from 'src/redux/selectors';
-import { storeHWAccounts, removeHWAccounts } from '@hardwareWallet/store/actions/actions';
+import { selectSettings } from 'src/redux/selectors';
+import { setHWAccounts, removeHWAccounts } from '@hardwareWallet/store/actions';
+import { selectActiveHardwareDevice } from '@hardwareWallet/store/selectors/hwSelectors';
 import { getNameFromAccount } from '../utils/getNameFromAccount';
 import { getHWAccounts } from '../utils/getHWAccounts';
 
 const useManageHWAccounts = () => {
   const dispatch = useDispatch();
   const settings = useSelector(selectSettings);
   const [prevDeviceId, setCurrentDeviceId] = useState();
-  const { deviceId, status } = useSelector(selectHW);
+  const { deviceId, status } = useSelector(selectActiveHardwareDevice);
 
   const addAccounts = () => {
     if (prevDeviceId === deviceId || status !== 'connected') {
@@ -18,7 +19,7 @@ const useManageHWAccounts = () => {
     setCurrentDeviceId(deviceId);
     getHWAccounts(getNameFromAccount, settings, deviceId)
       .then((accList) => {
-        dispatch(storeHWAccounts(accList));
+        dispatch(setHWAccounts(accList));
       })
       .catch((err) => console.log({ err }));
   };

src/modules/hardwareWallet/hooks/useManageHWAccounts.test.js

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks';
 import { useSelector } from 'react-redux';
-import { storeHWAccounts, removeHWAccounts } from '../store/actions/actions';
+import { setHWAccounts, removeHWAccounts } from '../store/actions';
 import { hwAccounts } from '../__fixtures__/hwAccounts';
 import { getHWAccounts } from '../utils/getHWAccounts';
 import useManageHWAccounts from './useManageHWAccounts';
@@ -10,8 +10,10 @@ jest.useRealTimers();
 const mockDispatch = jest.fn();
 const mockAppState = {
   hardwareWallet: {
-    deviceId: 20231,
-    status: 'connected',
+    currentDevice: {
+      deviceId: 20231,
+      status: 'connected',
+    },
   },
   settings: {
     hardwareAccounts: {},
@@ -38,16 +40,18 @@ describe('useManageHWAccounts hook', () => {
 
     await waitFor(() => {
       expect(mockDispatch).toHaveBeenCalledTimes(1);
-      const hwWalletAccountsDetails = storeHWAccounts(hwAccounts);
+      const hwWalletAccountsDetails = setHWAccounts(hwAccounts);
       expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining(hwWalletAccountsDetails));
     });
   });
 
   it('removes the list of accounts when the device is disconnected', async () => {
     const updatedMockAppState = {
       hardwareWallet: {
-        deviceId: 20231,
-        status: 'disconnected',
+        currentDevice: {
+          deviceId: 20231,
+          status: 'disconnected',
+        },
         accounts: hwAccounts,
       },
       settings: {

src/modules/hardwareWallet/store/actions/actions.js → src/modules/hardwareWallet/store/actions/accountsActions.js

@@ -1,7 +1,7 @@
 import actionTypes from './actionTypes';
 
-export const storeHWAccounts = (accounts) => ({
-  type: actionTypes.storeHWAccounts,
+export const setHWAccounts = (accounts) => ({
+  type: actionTypes.setHWAccounts,
   accounts,
 });
 

src/modules/hardwareWallet/store/actions/actions.test.js → src/modules/hardwareWallet/store/actions/accountsActions.test.js

@@ -1,14 +1,14 @@
+import { hwAccounts } from '@hardwareWallet/__fixtures__/hwAccounts';
+import { setHWAccounts, removeHWAccounts } from './accountsActions';
 import actionTypes from './actionTypes';
-import { storeHWAccounts, removeHWAccounts } from './actions';
-import { hwAccounts } from '../../__fixtures__/hwAccounts';
 
 describe('actions: hardware wallet', () => {
   it('stores the list of accounts', () => {
     const expectedAction = {
-      type: actionTypes.storeHWAccounts,
+      type: actionTypes.setHWAccounts,
       accounts: hwAccounts,
     };
-    expect(storeHWAccounts(hwAccounts)).toEqual(expectedAction);
+    expect(setHWAccounts(hwAccounts)).toEqual(expectedAction);
   });
   it('removes the list of accounts', () => {
     const expectedAction = {

src/modules/hardwareWallet/store/actions/actionTypes.js

@@ -1,6 +1,11 @@
+import { IPC_MESSAGES } from '@libs/hwServer/constants';
+
+const {DEVICE_LIST_CHANGED, DEVICE_UPDATE} = IPC_MESSAGES
 const actionTypes = {
-  storeHWAccounts: 'STORE_HW_ACCOUNTS',
-  removeHWAccounts: 'REMOVE_HW_ACCOUNTS',
+  setHWAccounts: 'HW_ACCOUNTS_ADD',
+  removeHWAccounts: 'HW_ACCOUNTS_REMOVE',
+  setDevices: `HW_${DEVICE_LIST_CHANGED}`,
+  setCurrentDevice: `HW_${DEVICE_UPDATE}`,
 };
 
 export default actionTypes;

src/modules/hardwareWallet/store/actions/devicesActions.js

@@ -0,0 +1,11 @@
+import actionTypes from '@hardwareWallet/store/actions/actionTypes';
+
+export const setHardwareWalletDevices = (devices) => ({
+  type: actionTypes.setDevices,
+  devices,
+});
+
+export const setCurrentDevice = ({ device }) => ({
+  type: actionTypes.setCurrentDevice,
+  device,
+});

src/modules/hardwareWallet/store/actions/devicesActions.test.js

@@ -0,0 +1,28 @@
+import actionTypes from './actionTypes';
+import { setHardwareWalletDevices, setCurrentDevice } from './devicesActions';
+
+describe('hardwareWalletActions', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should create an action to update devices', () => {
+    const devices = [{ deviceId: '1' }];
+    const expectedAction = {
+      type: actionTypes.setDevices,
+      devices,
+    };
+
+    expect(setHardwareWalletDevices(devices)).toEqual(expectedAction);
+  });
+
+  it('should create an action to update device', () => {
+    const device = { deviceId: '1' };
+    const expectedAction = {
+      type: actionTypes.setCurrentDevice,
+      device,
+    };
+
+    expect(setCurrentDevice({ device })).toEqual(expectedAction);
+  });
+});

src/modules/hardwareWallet/store/actions/index.js

@@ -0,0 +1,2 @@
+export * from './accountsActions'
+export * from './devicesActions'

src/modules/hardwareWallet/store/reducers/accountsReducers.js

@@ -0,0 +1,14 @@
+import actionTypes from '../actions/actionTypes';
+
+const initAccounts = [];
+
+export const accounts = (state = initAccounts, {type, accounts: hwAccount= initAccounts}) => {
+  switch (type) {
+    case actionTypes.setHWAccounts:
+      return hwAccount;
+    case actionTypes.removeHWAccounts:
+      return initAccounts;
+    default:
+      return state;
+  }
+};