Implement creating future transactions

src/modules/account/hooks/useAccounts.js

@@ -1,8 +1,8 @@
 import { useMemo, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { selectAccounts } from '@account/store/selectors';
+import { selectAccounts, selectAccountNonce } from '@account/store/selectors';
 import { selectHWAccounts } from '@hardwareWallet/store/selectors/hwSelectors';
-import { addAccount, deleteAccount } from '../store/action';
+import { addAccount, deleteAccount, setAccountNonce } from '../store/action';
 
 // eslint-disable-next-line
 export function useAccounts() {
@@ -22,11 +22,20 @@ export function useAccounts() {
   const getAccountByPublicKey = (pubkey) =>
     accounts.find((account) => account.metadata.pubkey === pubkey);
 
+  const setNonceByAccount = useCallback(
+    (address, nonce) => dispatch(setAccountNonce(address, nonce)),
+    []
+  );
+
+  const getNonceByAccount = (address) => useSelector(selectAccountNonce)[address];
+
   return {
     accounts,
     setAccount,
     deleteAccountByAddress,
     getAccountByPublicKey,
     getAccountByAddress,
+    setNonceByAccount,
+    getNonceByAccount,
   };
 }

src/modules/account/store/action.js

@@ -21,6 +21,12 @@ export const addAccount = (encryptedAccount) => ({
   encryptedAccount,
 });
 
+export const setAccountNonce = (address, nonce) => ({
+  type: actionTypes.setAccountNonce,
+  address,
+  nonce,
+});
+
 export const updateAccount = ({ encryptedAccount, accountDetail }) => ({
   type: actionTypes.updateAccount,
   encryptedAccount,

src/modules/account/store/actionTypes.js

@@ -2,6 +2,7 @@ const actionTypes = {
   setCurrentAccount: 'SET_CURRENT_ACCOUNT',
   updateCurrentAccount: 'UPDATE_CURRENT_ACCOUNT',
   addAccount: 'ADD_ACCOUNT',
+  setAccountNonce: 'SET_ACCOUNT_NONCE',
   updateAccount: 'UPDATE_ACCOUNT',
   deleteAccount: 'DELETE_ACCOUNT',
 };

src/modules/account/store/reducer.js

@@ -58,14 +58,27 @@ export const list = (state = {}, { type, encryptedAccount, accountDetail, addres
   }
 };
 
+export const localNonce = (state = {}, { type, address, nonce }) => {
+  switch (type) {
+    case actionTypes.setAccountNonce:
+      return {
+        ...state,
+        [address]: nonce,
+      };
+
+    default:
+      return state;
+  }
+};
+
 const persistConfig = {
   key: 'account',
   storage,
-  whitelist: ['list', 'current'], // only navigation will be persisted
+  whitelist: ['list', 'current', 'localNonce'], // only navigation will be persisted
   blacklist: [],
 };
 
-const accountReducer = combineReducers({ current, list });
+const accountReducer = combineReducers({ current, list, localNonce });
 
 // eslint-disable-next-line import/prefer-default-export
 export const account = persistReducer(persistConfig, accountReducer);

src/modules/account/store/reducer.test.js

@@ -1,6 +1,6 @@
 import mockSavedAccounts from '@tests/fixtures/accounts';
 import actionTypes from './actionTypes';
-import { list, current } from './reducer';
+import { list, current, localNonce } from './reducer';
 
 describe('Auth reducer', () => {
   it('Should return encryptedAccount if setCurrentAccount action type is triggered', async () => {
@@ -82,4 +82,16 @@ describe('Auth reducer', () => {
     expect(list(defaultState, actionData)).toEqual({});
     expect(current(mockSavedAccounts[0], actionData)).toEqual(mockSavedAccounts[0]);
   });
+
+  it('Should not remove current account when deleting not current account', async () => {
+    const actionData = {
+      type: actionTypes.setAccountNonce,
+      address: mockSavedAccounts[1].metadata.address,
+      nonce: 1,
+    };
+    const expectedState = {
+      [mockSavedAccounts[1].metadata.address]: 1,
+    };
+    expect(localNonce({}, actionData)).toEqual(expectedState);
+  });
 });

src/modules/account/store/selectors.js

@@ -1,2 +1,3 @@
 export const selectCurrentAccount = (state) => state.account.current;
 export const selectAccounts = (state) => state.account.list || [];
+export const selectAccountNonce = (state) => state.account.localNonce || {};

src/modules/auth/hooks/useNonceSync.js

@@ -0,0 +1,55 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCurrentApplication } from '@blockchainApplication/manage/hooks';
+import { useCurrentAccount, useAccounts } from '@account/hooks';
+import useSettings from '@settings/hooks/useSettings';
+import { AUTH } from 'src/const/queries';
+import { useAuthConfig } from './queries';
+
+// eslint-disable-next-line max-statements
+const useNonceSync = () => {
+  const queryClient = useQueryClient();
+  const [currentApplication] = useCurrentApplication();
+  const [currentAccount] = useCurrentAccount();
+  const { setNonceByAccount, getNonceByAccount } = useAccounts();
+  const currentAccountAddress = currentAccount.metadata.address;
+  const currentAccountNonce = getNonceByAccount(currentAccountAddress);
+  const { mainChainNetwork } = useSettings('mainChainNetwork');
+  const chainID = currentApplication.chainID;
+  const customConfig = {
+    params: {
+      address: currentAccountAddress,
+    },
+  };
+  const baseUrl = mainChainNetwork?.serviceUrl;
+  const config = useAuthConfig(customConfig);
+  const authData = queryClient.getQueryData([AUTH, chainID, config, baseUrl]);
+  const onChainNonce = authData?.data.nonce;
+  const [accountNonce, setAccountNonce] = useState(onChainNonce);
+
+  // Store nonce by address in accounts store
+  const handleLocalNonce = (currentNonce) => {
+    let localNonce = parseInt(currentAccountNonce || 0, 10);
+    if (localNonce < currentNonce) {
+      localNonce = currentNonce;
+    }
+    setNonceByAccount(currentAccountAddress, localNonce);
+
+    setAccountNonce(localNonce);
+  };
+
+  useEffect(() => {
+    handleLocalNonce(parseInt(onChainNonce, 10));
+  }, [onChainNonce]);
+
+  // Call incrementNonce after transaction signing
+  const incrementNonce = useCallback(() => {
+    let localNonce = currentAccountNonce;
+    localNonce += 1;
+    setNonceByAccount(currentAccountAddress, localNonce);
+  }, []);
+
+  return { accountNonce, onChainNonce, incrementNonce };
+};
+
+export default useNonceSync;

src/modules/auth/hooks/useNonceSync.test.js

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/react-hooks';
+import * as ReactQuery from '@tanstack/react-query';
+import { queryWrapper as wrapper } from 'src/utils/test/queryWrapper';
+import mockSavedAccounts from '@tests/fixtures/accounts';
+import { useAccounts } from 'src/modules/account/hooks';
+import { mockAuth } from '@auth/__fixtures__';
+import useNonceSync from './useNonceSync';
+
+const mockedCurrentAccount = mockSavedAccounts[0];
+const mockSetNonceByAccount = jest.fn();
+const mockModifiedMockAuth = { ...mockAuth, data: { ...mockAuth.data, nonce: '2' } };
+
+jest.mock('@account/hooks/useCurrentAccount', () => ({
+  useCurrentAccount: jest.fn(() => [mockedCurrentAccount, jest.fn()]),
+}));
+jest.mock('@account/hooks/useAccounts');
+jest.mock('@auth/hooks/queries/useAuth');
+
+describe('useNonceSync', () => {
+  it('renders properly', async () => {
+    jest
+      .spyOn(ReactQuery, 'useQueryClient')
+      .mockReturnValue({ getQueryData: () => mockModifiedMockAuth });
+    useAccounts.mockReturnValue({
+      accounts: mockedCurrentAccount,
+      setNonceByAccount: mockSetNonceByAccount,
+      getNonceByAccount: jest.fn().mockReturnValue(3),
+    });
+    const { result } = renderHook(() => useNonceSync(), { wrapper });
+    expect(result.current.accountNonce).toEqual(3);
+    result.current.incrementNonce();
+    expect(mockSetNonceByAccount).toHaveBeenCalled();
+  });
+
+  it('renders properly if auth nonce is undefined and no local nonce has been previously stored', () => {
+    jest.spyOn(ReactQuery, 'useQueryClient').mockReturnValue({ getQueryData: () => {} });
+    useAccounts.mockReturnValue({
+      accounts: mockedCurrentAccount,
+      setNonceByAccount: mockSetNonceByAccount,
+      getNonceByAccount: jest.fn().mockReturnValue(undefined),
+    });
+    const { result } = renderHook(() => useNonceSync(), { wrapper });
+    expect(result.current.accountNonce).toEqual(0);
+  });
+
+  it("updates local nonce if it's less than on-chain nonce", () => {
+    jest
+      .spyOn(ReactQuery, 'useQueryClient')
+      .mockReturnValue({ getQueryData: () => mockModifiedMockAuth });
+    useAccounts.mockReturnValue({
+      accounts: mockedCurrentAccount,
+      setNonceByAccount: mockSetNonceByAccount,
+      getNonceByAccount: jest.fn().mockReturnValue(1),
+    });
+    const { result } = renderHook(() => useNonceSync(), { wrapper });
+    expect(result.current.accountNonce).toEqual(2);
+  });
+});

src/modules/blockchainApplication/connection/components/RequestSignMessageDialog/index.test.js

@@ -48,6 +48,8 @@ useCurrentAccount.mockReturnValue([mockCurrentAccount, mockSetCurrentAccount]);
 useAccounts.mockReturnValue({
   getAccountByAddress: () => mockSavedAccounts[0],
   accounts: mockSavedAccounts,
+  setNonceByAccount: jest.fn(),
+  getNonceByAccount: () => 1,
 });
 
 useBlockchainApplicationMeta.mockReturnValue({

src/modules/legacy/components/Summary/summary.test.js

@@ -20,6 +20,7 @@ const mockedCurrentAccount = mockSavedAccounts[0];
 
 jest.mock('@auth/hooks/queries/useAuth');
 jest.mock('@account/hooks', () => ({
+  ...jest.requireActual('@account/hooks'),
   useCurrentAccount: jest.fn(() => [mockedCurrentAccount, jest.fn()]),
 }));
 

src/modules/pos/validator/components/ClaimRewardsSummary/ClaimRewardsSummary.test.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
+import { smartRender } from 'src/utils/testHelpers';
 import mockSavedAccounts from '@tests/fixtures/accounts';
 import { useRewardsClaimable } from '@pos/reward/hooks/queries';
 import wallets from '@tests/constants/wallets';
@@ -8,10 +8,10 @@ import { useAuth } from '@auth/hooks/queries';
 import { mockAuth } from '@auth/__fixtures__';
 import { mockAppsTokens } from '@token/fungible/__fixtures__';
 import usePosToken from '@pos/validator/hooks/usePosToken';
-import { mount } from 'enzyme';
 import ClaimRewardsSummary from './index';
 
 jest.mock('@account/hooks', () => ({
+  ...jest.requireActual('@account/hooks'),
   useCurrentAccount: jest.fn(() => [mockSavedAccounts[0], jest.fn()]),
 }));
 jest.mock('@auth/hooks/queries');
@@ -56,24 +56,25 @@ describe('ClaimRewardsSummary', () => {
   useAuth.mockReturnValue({ data: mockAuth });
   usePosToken.mockReturnValue({ token: mockAppsTokens.data[0] });
   useRewardsClaimable.mockReturnValue({ data: mockRewardsClaimableWithToken });
+  const config = { queryClient: true /*  renderType: 'mount' */ };
 
   it('should display properly', async () => {
-    render(<ClaimRewardsSummary {...props} />);
+    smartRender(ClaimRewardsSummary, props, config);
 
     expect(screen.getByText('Confirm')).toBeTruthy();
   });
 
   it('should go to prev page when click Go back button', () => {
-    const wrapper = mount(<ClaimRewardsSummary {...props} />);
+    smartRender(ClaimRewardsSummary, props, config);
     expect(props.prevStep).not.toBeCalled();
-    wrapper.find('button.cancel-button').simulate('click');
+    fireEvent.click(screen.getByAltText('arrowLeftTailed'));
     expect(props.prevStep).toBeCalled();
   });
 
   it('should submit transaction and action function when click in confirm button', () => {
-    const wrapper = mount(<ClaimRewardsSummary {...props} />);
+    smartRender(ClaimRewardsSummary, props, config);
     expect(props.nextStep).not.toBeCalled();
-    wrapper.find('button.confirm-button').simulate('click');
+    fireEvent.click(screen.getByText('Confirm'));
     expect(props.nextStep).toBeCalledWith({
       actionFunction: props.claimedRewards,
       formProps: props.formProps,

src/modules/pos/validator/components/RegisterValidatorSummary/RegisterValidatorSummary.test.js

@@ -1,6 +1,4 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { mountWithRouterAndStore } from 'src/utils/testHelpers';
+import { smartRender } from 'src/utils/testHelpers';
 import accounts from '@tests/constants/wallets';
 import { useAuth } from '@auth/hooks/queries';
 import mockSavedAccounts from '@tests/fixtures/accounts';
@@ -10,8 +8,10 @@ import Summary from './RegisterValidatorSummary';
 const mockedCurrentAccount = mockSavedAccounts[0];
 jest.mock('@auth/hooks/queries');
 jest.mock('@account/hooks', () => ({
+  ...jest.requireActual('@account/hooks'),
   useCurrentAccount: jest.fn(() => [mockedCurrentAccount, jest.fn()]),
 }));
+const config = { renderType: 'mount', queryClient: true };
 
 describe('Validator Registration Summary', () => {
   const props = {
@@ -58,7 +58,7 @@ describe('Validator Registration Summary', () => {
   useAuth.mockReturnValue({ data: mockAuth });
 
   it('renders properly Summary component', () => {
-    const wrapper = mount(<Summary {...props} />);
+    const wrapper = smartRender(Summary, props, config).wrapper;
     expect(wrapper).toContainMatchingElement('.username-label');
     expect(wrapper).toContainMatchingElement('.username');
     expect(wrapper).toContainMatchingElement('.address');
@@ -67,14 +67,14 @@ describe('Validator Registration Summary', () => {
   });
 
   it('go to prev page when click Go back button', () => {
-    const wrapper = mount(<Summary {...props} />);
+    const wrapper = smartRender(Summary, props, config).wrapper;
     expect(props.prevStep).not.toBeCalled();
     wrapper.find('button.cancel-button').simulate('click');
     expect(props.prevStep).toBeCalled();
   });
 
   it('submit user data when click in confirm button', () => {
-    const wrapper = mountWithRouterAndStore(Summary, props, {}, {});
+    const wrapper = smartRender(Summary, props, config).wrapper;
     expect(props.nextStep).not.toBeCalled();
     wrapper.find('button.confirm-button').simulate('click');
     expect(props.nextStep).toBeCalledWith({