Merge pull request #5392 from LiskHQ/5377-staking-visual-interaction-…

…bugs

Fixed claim rewards visual bugs

setup/react/app/MainRouter.js

@@ -5,8 +5,9 @@ import { addSearchParamsToUrl } from 'src/utils/searchParams';
 import { useEvents } from '@libs/wcm/hooks/useEvents';
 import { EVENTS } from '@libs/wcm/constants/lifeCycle';
 import routesMap from 'src/routes/routesMap';
-import NotFound from 'src/modules/common/components/NotFound';
-import CustomRoute from 'src/modules/common/components/customRoute';
+import NotFound from '@common/components/NotFound';
+import CustomRoute from '@common/components/customRoute';
+import RewardsNotification from '@common/components/notification/rewardsNotification';
 import routes from 'src/routes/routes';
 import styles from './app.css';
 
@@ -30,6 +31,7 @@ const MainRouter = ({ history }) => {
 
   return (
     <div className={`${styles.mainContent} ${styles.mainBox}`}>
+      <RewardsNotification />
       <Switch>
         {routesList.map((route) => (
           <CustomRoute

src/locales/en/common.json

@@ -803,6 +803,7 @@
   "You can see a list of your applications on the network dropdown.": "You can see a list of your applications on the network dropdown.",
   "You do not have any bookmarks yet.": "You do not have any bookmarks yet.",
   "You do not have any tokens yet.": "You do not have any tokens yet.",
+  "You have an unclaimed reward for your stakes.": "You have an unclaimed reward for your stakes.",
   "You have cancelled the transaction on your hardware wallet.": "You have cancelled the transaction on your hardware wallet.",
   "You have disconnected the device": "You have disconnected the device",
   "You have now locked": "You have now locked",

src/modules/common/components/notification/rewardsNotification/index.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useContext } from 'react';
+import { toast } from 'react-toastify';
+import { useTranslation } from 'react-i18next';
+import { ApplicationBootstrapContext } from '@setup/react/app/ApplicationBootstrap';
+import DialogLink from '@theme/dialog/link';
+import styles from './styles.css';
+
+const RewardsNotification = () => {
+  const { t } = useTranslation();
+  const {
+    appEvents: {
+      transactions: { rewards },
+    },
+  } = useContext(ApplicationBootstrapContext);
+  const notification = rewards.length && BigInt(rewards[0]?.reward || 0) > BigInt(0);
+
+  useEffect(() => {
+    if (notification) {
+      toast.info(
+        <div className={styles.rewardInfo}>
+          <p>{t('You have an unclaimed reward for your stakes.')}</p>
+          <DialogLink component="claimRewardsView" className={styles.rewardLink}>
+            {t('Claim rewards')}
+          </DialogLink>
+        </div>,
+        {
+          autoClose: false,
+          draggable: false,
+          closeButton: <span className={`${styles.closeBtn} dialog-close-button`} />,
+          toastId: 'claimRewards',
+        }
+      );
+    }
+  }, [rewards]);
+
+  return null;
+};
+
+export default RewardsNotification;

src/modules/common/components/notification/rewardsNotification/index.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { ToastContainer } from 'react-toastify';
+import { ApplicationBootstrapContext } from '@setup/react/app/ApplicationBootstrap';
+import { smartRender } from 'src/utils/testHelpers';
+import RewardsNotification from '.';
+
+describe('RewardsNotification', () => {
+  it('renders properly', async () => {
+    const Component = (props) => (
+      <ApplicationBootstrapContext.Provider
+        value={{ appEvents: { transactions: { rewards: [{ reward: 10000 }] } } }}
+      >
+        <ToastContainer />
+        <RewardsNotification {...props} />
+      </ApplicationBootstrapContext.Provider>
+    );
+    smartRender(Component);
+
+    await waitFor(() => {
+      expect(screen.getByText('You have an unclaimed reward for your stakes.')).toBeVisible();
+    });
+  });
+
+  it('does not render if there are no rewards', async () => {
+    const Component = (props) => (
+      <ApplicationBootstrapContext.Provider
+        value={{ appEvents: { transactions: { rewards: [] } } }}
+      >
+        <ToastContainer />
+        <RewardsNotification {...props} />
+      </ApplicationBootstrapContext.Provider>
+    );
+    smartRender(Component);
+
+    await waitFor(() => {
+      expect(
+        screen.queryByText('You have an unclaimed reward for your stakes.')
+      ).not.toBeInTheDocument();
+    });
+  });
+});

src/modules/common/components/notification/rewardsNotification/styles.css

@@ -0,0 +1,51 @@
+.rewardInfo {
+  & p {
+    margin-top: 8px;
+    margin-bottom: 0;
+    font-size: 16px;
+    font-weight: var(--font-weight-normal);
+    line-height: 20px;
+  }
+
+  .rewardLink {
+    margin-top: 11px;
+    margin-bottom: 0;
+    color: var(--color-ultramarine-blue);
+    font-size: 15px;
+    cursor: pointer;
+  }
+}
+
+.closeBtn {
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--color-ultramarine-blue);
+  cursor: pointer;
+  display: flex;
+  height: 12px;
+  width: 12px;
+  justify-content: center;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 4;
+
+  &::before,
+  &::after {
+    background-color: currentColor;
+    color: inherit;
+    content: '';
+    height: 19px;
+    position: absolute;
+    width: 3px;
+    border-radius: 3px;
+  }
+
+  &::before {
+    transform: rotate(45deg);
+  }
+
+  &::after {
+    transform: rotate(-45deg);
+  }
+}

src/modules/pos/validator/components/SentStakes/SentStakes.js

@@ -39,7 +39,7 @@ function ClaimRewardsDialogButton({ address }) {
     <DialogLink component="claimRewardsView">
       <SecondaryButton disabled={!hasClaimableRewards}>
         {t('Claim rewards')}
-        {hasClaimableRewards && <Badge />}
+        {!!hasClaimableRewards && <Badge />}
       </SecondaryButton>
     </DialogLink>
   );

src/modules/pos/validator/components/ValidatorsMonitorView/Validators.css

@@ -1,56 +1,5 @@
 @import '../../../../../../setup/react/app/mixins.css';
 
-.closeBtn {
-  align-items: center;
-  box-sizing: border-box;
-  color: var(--color-ultramarine-blue);
-  cursor: pointer;
-  display: flex;
-  height: 12px;
-  width: 12px;
-  justify-content: center;
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  z-index: 4;
-
-  &::before,
-  &::after {
-    background-color: currentColor;
-    color: inherit;
-    content: '';
-    height: 19px;
-    position: absolute;
-    width: 3px;
-    border-radius: 3px;
-  }
-
-  &::before {
-    transform: rotate(45deg);
-  }
-
-  &::after {
-    transform: rotate(-45deg);
-  }
-}
-
-.rewardInfo {
-  & p {
-    margin-top: 8px;
-    margin-bottom: 0;
-    font-size: 16px;
-    font-weight: var(--font-weight-normal);
-    line-height: 20px;
-  }
-
-  .rewardLink {
-    margin-top: 11px;
-    margin-bottom: 0;
-    color: var(--color-ultramarine-blue);
-    font-size: 15px;
-  }
-}
-
 .validatorDetails {
   display: flex;
   flex-direction: row;

src/modules/pos/validator/components/ValidatorsMonitorView/Validators.js

@@ -1,11 +1,10 @@
 /* eslint-disable complexity */
 /* istanbul ignore file */
-import React, { useRef, useState, useContext, useEffect } from 'react';
+import React, { useRef, useState, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import { useTranslation } from 'react-i18next';
 import routes from 'src/routes/routes';
-import { toast } from 'react-toastify';
 import { ApplicationBootstrapContext } from '@setup/react/app/ApplicationBootstrap';
 import Badge from '@common/components/badge';
 import { Input } from 'src/theme';
@@ -88,23 +87,6 @@ const ValidatorsMonitor = ({ watchList }) => {
   } = useContext(ApplicationBootstrapContext);
   const notification = rewards.length && BigInt(rewards[0]?.reward || 0) > BigInt(0);
 
-  useEffect(() => {
-    if (notification) {
-      toast.info(
-        <div className={styles.rewardInfo}>
-          <p>You have an unclaimed reward of your stakes.</p>
-          <DialogLink component="claimRewardsView" className={styles.rewardLink}>
-            Claim rewards
-          </DialogLink>
-        </div>,
-        {
-          autoClose: false,
-          closeButton: <span className={`${styles.closeBtn} dialog-close-button`} />,
-        }
-      );
-    }
-  }, [rewards]);
-
   const handleFilter = ({ target: { value } }) => {
     setSearch(value);
     clearTimeout(timeout.current);