From 3379422bb1dbc1768ced470d34c8d6b23163a3cd Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Mon, 16 Oct 2023 14:03:30 +0100 Subject: [PATCH 1/4] Fixed claim rewards toast and related visual bugs --- setup/react/app/MainRouter.js | 6 ++- .../notification/rewardsNotification/index.js | 37 ++++++++++++++ .../rewardsNotification/index.test.js | 42 +++++++++++++++ .../rewardsNotification/styles.css | 51 +++++++++++++++++++ .../components/SentStakes/SentStakes.js | 2 +- .../ValidatorsMonitorView/Validators.css | 51 ------------------- .../ValidatorsMonitorView/Validators.js | 20 +------- 7 files changed, 136 insertions(+), 73 deletions(-) create mode 100644 src/modules/common/components/notification/rewardsNotification/index.js create mode 100644 src/modules/common/components/notification/rewardsNotification/index.test.js create mode 100644 src/modules/common/components/notification/rewardsNotification/styles.css diff --git a/setup/react/app/MainRouter.js b/setup/react/app/MainRouter.js index 970e68a70b..df4556d509 100644 --- a/setup/react/app/MainRouter.js +++ b/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 (
+ {routesList.map((route) => ( { + const { + appEvents: { + transactions: { rewards }, + }, + } = useContext(ApplicationBootstrapContext); + const notification = rewards.length && BigInt(rewards[0]?.reward || 0) > BigInt(0); + + useEffect(() => { + if (notification) { + toast.info( +
+

You have an unclaimed reward of your stakes.

+ + Claim rewards + +
, + { + autoClose: false, + draggable: false, + closeButton: , + toastId: 'claimRewards', + } + ); + } + }, [rewards]); + + return null; +}; + +export default RewardsNotification; diff --git a/src/modules/common/components/notification/rewardsNotification/index.test.js b/src/modules/common/components/notification/rewardsNotification/index.test.js new file mode 100644 index 0000000000..43c416a0b6 --- /dev/null +++ b/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) => ( + + + + + ); + smartRender(Component); + + await waitFor(() => { + expect(screen.getByText('You have an unclaimed reward of your stakes.')).toBeVisible(); + }); + }); + + it('does not render if there are no rewards', async () => { + const Component = (props) => ( + + + + + ); + smartRender(Component); + + await waitFor(() => { + expect( + screen.queryByText('You have an unclaimed reward of your stakes.') + ).not.toBeInTheDocument(); + }); + }); +}); diff --git a/src/modules/common/components/notification/rewardsNotification/styles.css b/src/modules/common/components/notification/rewardsNotification/styles.css new file mode 100644 index 0000000000..01fc579e03 --- /dev/null +++ b/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); + } +} diff --git a/src/modules/pos/validator/components/SentStakes/SentStakes.js b/src/modules/pos/validator/components/SentStakes/SentStakes.js index 5c4f50f032..05b93de3a3 100644 --- a/src/modules/pos/validator/components/SentStakes/SentStakes.js +++ b/src/modules/pos/validator/components/SentStakes/SentStakes.js @@ -39,7 +39,7 @@ function ClaimRewardsDialogButton({ address }) { {t('Claim rewards')} - {hasClaimableRewards && } + {!!hasClaimableRewards && } ); diff --git a/src/modules/pos/validator/components/ValidatorsMonitorView/Validators.css b/src/modules/pos/validator/components/ValidatorsMonitorView/Validators.css index 8399878479..077bcf9e44 100644 --- a/src/modules/pos/validator/components/ValidatorsMonitorView/Validators.css +++ b/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; diff --git a/src/modules/pos/validator/components/ValidatorsMonitorView/Validators.js b/src/modules/pos/validator/components/ValidatorsMonitorView/Validators.js index 8f5a73f8d7..057bdf6bef 100644 --- a/src/modules/pos/validator/components/ValidatorsMonitorView/Validators.js +++ b/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( -
-

You have an unclaimed reward of your stakes.

- - Claim rewards - -
, - { - autoClose: false, - closeButton: , - } - ); - } - }, [rewards]); - const handleFilter = ({ target: { value } }) => { setSearch(value); clearTimeout(timeout.current); From 28294dc011d5e4d520342e2b8f0bdaf930562efb Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Mon, 16 Oct 2023 14:35:15 +0100 Subject: [PATCH 2/4] Minor review fix --- .../common/components/notification/rewardsNotification/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/common/components/notification/rewardsNotification/index.js b/src/modules/common/components/notification/rewardsNotification/index.js index 4317abc3bc..d38f8c693d 100644 --- a/src/modules/common/components/notification/rewardsNotification/index.js +++ b/src/modules/common/components/notification/rewardsNotification/index.js @@ -16,7 +16,7 @@ const RewardsNotification = () => { if (notification) { toast.info(
-

You have an unclaimed reward of your stakes.

+

You have an unclaimed reward for your stakes.

Claim rewards From d8d0cb2b2e1bc9439b7e84ee09a1780667656cfb Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Mon, 16 Oct 2023 14:48:23 +0100 Subject: [PATCH 3/4] Fixed feedback from PR --- src/locales/en/common.json | 1 + .../components/notification/rewardsNotification/index.js | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/locales/en/common.json b/src/locales/en/common.json index 35b870a453..f7d048b2f1 100644 --- a/src/locales/en/common.json +++ b/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", diff --git a/src/modules/common/components/notification/rewardsNotification/index.js b/src/modules/common/components/notification/rewardsNotification/index.js index d38f8c693d..9239ee0dac 100644 --- a/src/modules/common/components/notification/rewardsNotification/index.js +++ b/src/modules/common/components/notification/rewardsNotification/index.js @@ -1,10 +1,12 @@ 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 }, @@ -16,9 +18,9 @@ const RewardsNotification = () => { if (notification) { toast.info(
-

You have an unclaimed reward for your stakes.

+

{t('You have an unclaimed reward for your stakes.')}

- Claim rewards + {t('Claim rewards')}
, { From 0f58639701f457cd6038ed81b42edc5b11e5fbc3 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Mon, 16 Oct 2023 14:49:56 +0100 Subject: [PATCH 4/4] Fixed failing test --- .../components/notification/rewardsNotification/index.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/modules/common/components/notification/rewardsNotification/index.test.js b/src/modules/common/components/notification/rewardsNotification/index.test.js index 43c416a0b6..828c56def5 100644 --- a/src/modules/common/components/notification/rewardsNotification/index.test.js +++ b/src/modules/common/components/notification/rewardsNotification/index.test.js @@ -18,7 +18,7 @@ describe('RewardsNotification', () => { smartRender(Component); await waitFor(() => { - expect(screen.getByText('You have an unclaimed reward of your stakes.')).toBeVisible(); + expect(screen.getByText('You have an unclaimed reward for your stakes.')).toBeVisible(); }); }); @@ -35,7 +35,7 @@ describe('RewardsNotification', () => { await waitFor(() => { expect( - screen.queryByText('You have an unclaimed reward of your stakes.') + screen.queryByText('You have an unclaimed reward for your stakes.') ).not.toBeInTheDocument(); }); });