Merge pull request #5561 from LiskHQ/5532-validators-list-stake-button

Fix stake button link on validators list
LiskHQ · Dec 29, 2023 · fa3e4bc · fa3e4bc
2 parents 96f254a + d17a271
commit fa3e4bc
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/modules/pos/validator/components/ValidatorSummary/ValidatorSummary.js b/src/modules/pos/validator/components/ValidatorSummary/ValidatorSummary.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router-dom';
 import Box from 'src/theme/box';
 import BoxHeader from 'src/theme/box/header';
 import BoxContent from 'src/theme/box/content';
@@ -8,17 +9,23 @@ import { truncateAddress } from 'src/modules/wallet/utils/account';
 import DateTimeFromTimestamp from 'src/modules/common/components/timestamp';
 import WalletVisual from 'src/modules/wallet/components/walletVisual';
 import { PrimaryButton } from 'src/theme/buttons';
-import DialogLink from 'src/theme/dialog/link';
+import { addSearchParamsToUrl } from 'src/utils/searchParams';
 import styles from './ValidatorSummary.css';
 import { convertCommissionToPercentage } from '../../utils';
 import { usePosConstants } from '../../hooks/queries';
 
 const ValidatorSummary = ({ validator, status, weight }) => {
   const { address, name, rank, commission, nextAllocatedTime } = validator;
   const { t } = useTranslation();
+  const history = useHistory();
   const { data: posConstants } = usePosConstants();
   const roundLength = posConstants?.data?.roundLength || '-';
 
+  const handleClick = (e) => {
+    e.preventDefault();
+    addSearchParamsToUrl(history, { validatorAddress: address, modal: 'editStake' });
+  };
+
   return (
     <Box className={styles.wrapper}>
       <BoxHeader>
@@ -32,9 +39,9 @@ const ValidatorSummary = ({ validator, status, weight }) => {
             <p className={styles.validatorAddress}>{truncateAddress(address)}</p>
           </div>
           <div>
-            <DialogLink component="editStake">
-              <PrimaryButton disabled={status.className === 'banned'}>{t('Stake')}</PrimaryButton>
-            </DialogLink>
+            <PrimaryButton disabled={status.className === 'banned'} onClick={handleClick}>
+              {t('Stake')}
+            </PrimaryButton>
           </div>
         </div>
       </BoxHeader>

diff --git a/src/modules/pos/validator/components/ValidatorSummary/ValidatorSummary.test.js b/src/modules/pos/validator/components/ValidatorSummary/ValidatorSummary.test.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 import { renderWithRouter } from 'src/utils/testHelpers';
-import { screen } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
+import { addSearchParamsToUrl } from 'src/utils/searchParams';
 import { mockValidators } from '../../__fixtures__';
 import ValidatorSummary from './ValidatorSummary';
 import { convertCommissionToPercentage } from '../../utils';
@@ -16,6 +17,7 @@ jest.mock('react-i18next', () => ({
 }));
 
 jest.mock('../../hooks/queries/usePosConstants');
+jest.mock('src/utils/searchParams');
 
 describe('ValidatorSummary', () => {
   let wrapper;
@@ -75,4 +77,15 @@ describe('ValidatorSummary', () => {
       )
     ).toBeTruthy();
   });
+
+  it('should directly open validator staking modal', async () => {
+    props.status = { className: 'active', value: 'Active' };
+    wrapper.rerender(
+      <MemoryRouter>
+        <ValidatorSummary {...props} />
+      </MemoryRouter>
+    );
+    fireEvent.click(screen.getByText('Stake'));
+    expect(addSearchParamsToUrl).toHaveBeenCalled();
+  });
 });