feat: [LW-7837, LW-8921] add warning banner for retiring, retired and saturated stake pools (#678)

---------

Signed-off-by: John Oshalusi <john.oshalusi@iohk.io>
Co-authored-by: Szymon Masłowski <szymon.maslowski@iohk.io>

Author: greatertomi

packages/staking/src/features/overview/StakingInfoCard/moon.component.svg renamed to packages/staking/src/assets/icons/moon.component.svg

@@ -116,6 +116,8 @@ export const en: Translations = {
   'overview.banners.portfolioDrifted.message':
     'Make sure to rebalance your staking ratios if you want to match your preferences',
   'overview.banners.portfolioDrifted.title': 'Your current delegation portfolio has shifted',
+  'overview.banners.saturatedOrRetiredPool.message': 'Please make sure to choose other pool(s) to avoid losing rewards',
+  'overview.banners.saturatedOrRetiredPool.title': 'One or several of your pools are too saturated / retired',
   'overview.delegationCard.label.balance': 'ADA Balance',
   'overview.delegationCard.label.pools': 'Pool(s)',
   'overview.delegationCard.label.status': 'Status',
@@ -142,6 +144,7 @@ export const en: Translations = {
   'overview.stakingInfoCard.lastReward': 'Last reward',
   'overview.stakingInfoCard.margin': 'Margin',
   'overview.stakingInfoCard.poolRetired': 'Pool retired',
+  'overview.stakingInfoCard.poolRetiring': 'Pool retiring',
   'overview.stakingInfoCard.poolSaturated': 'Pool over-saturated',
   'overview.stakingInfoCard.ros': 'ROS',
   'overview.stakingInfoCard.tooltipFiatLabel': 'USD Value',

packages/staking/src/assets/icons/warning-triangle.svg

@@ -200,6 +200,10 @@ type KeysStructure = {
         title: '';
         message: '';
       };
+      saturatedOrRetiredPool: {
+        title: '';
+        message: '';
+      };
     };
     stakingInfoCard: {
       fee: '';
@@ -209,6 +213,7 @@ type KeysStructure = {
       totalRewards: '';
       totalStaked: '';
       poolRetired: '';
+      poolRetiring: '';
       poolSaturated: '';
       tooltipFiatLabel: '';
     };

packages/staking/src/features/overview/StakingInfoCard/warning.component.svg renamed to packages/staking/src/assets/icons/warning.component.svg

@@ -10,7 +10,7 @@ import { GetStartedSteps } from './GetStartedSteps';
 import { hasMinimumFundsToDelegate, hasPendingDelegationTransaction, mapPortfolioToDisplayData } from './helpers';
 import { StakeFundsBanner } from './StakeFundsBanner';
 import { StakingInfoCard } from './StakingInfoCard';
-import { StakingNotificationBanner, getCurrentStakingNotification } from './StakingNotificationBanner';
+import { StakingNotificationBanners, getCurrentStakingNotifications } from './StakingNotificationBanners';
 
 export const Overview = () => {
   const { t } = useTranslation();
@@ -29,7 +29,7 @@ export const Overview = () => {
     currentPortfolio: store.currentPortfolio,
     portfolioMutators: store.mutators,
   }));
-  const stakingNotification = getCurrentStakingNotification({ currentPortfolio, walletActivities });
+  const stakingNotifications = getCurrentStakingNotifications({ currentPortfolio, walletActivities });
 
   const totalCoinBalance = balancesBalance?.total?.coinBalance;
 
@@ -76,8 +76,9 @@ export const Overview = () => {
   if (currentPortfolio.length === 0) {
     return (
       <>
-        {stakingNotification ? (
-          <StakingNotificationBanner notification={stakingNotification} />
+        {/* defensive check - no other notification than pendingFirstDelegation should be possible here at the moment of writing this comment */}
+        {stakingNotifications.includes('pendingFirstDelegation') ? (
+          <StakingNotificationBanners notifications={stakingNotifications} />
         ) : (
           <Flex flexDirection="column" gap="$32">
             <StakeFundsBanner balance={totalCoinBalance} />
@@ -104,10 +105,10 @@ export const Overview = () => {
           status={currentPortfolio.length === 1 ? 'simple-delegation' : 'multi-delegation'}
         />
       </Box>
-      {stakingNotification && (
-        <Box mb="$40">
-          <StakingNotificationBanner notification={stakingNotification} />
-        </Box>
+      {stakingNotifications.length > 0 && (
+        <Flex mb="$40" flexDirection="column">
+          <StakingNotificationBanners notifications={stakingNotifications} />
+        </Flex>
       )}
       <Flex justifyContent="space-between" mb="$16">
         <Text.SubHeading>{t('overview.yourPoolsSection.heading')}</Text.SubHeading>

packages/staking/src/features/i18n/translations/en.ts

@@ -11,7 +11,7 @@ import { FundWalletBanner } from './FundWalletBanner';
 import { hasMinimumFundsToDelegate, mapPortfolioToDisplayData } from './helpers';
 import { StakeFundsBanner } from './StakeFundsBanner';
 import { StakingInfoCard } from './StakingInfoCard';
-import { StakingNotificationBanner, getCurrentStakingNotification } from './StakingNotificationBanner';
+import { StakingNotificationBanners, getCurrentStakingNotifications } from './StakingNotificationBanners';
 
 export const OverviewPopup = () => {
   const { t } = useTranslation();
@@ -30,7 +30,7 @@ export const OverviewPopup = () => {
     currentPortfolio: store.currentPortfolio,
     portfolioMutators: store.mutators,
   }));
-  const stakingNotification = getCurrentStakingNotification({ currentPortfolio, walletActivities });
+  const stakingNotifications = getCurrentStakingNotifications({ currentPortfolio, walletActivities });
 
   const totalCoinBalance = balancesBalance?.total?.coinBalance || '0';
 
@@ -85,10 +85,10 @@ export const OverviewPopup = () => {
 
   return (
     <>
-      {stakingNotification === 'portfolioDrifted' && (
-        <Box mb="$32">
-          <StakingNotificationBanner notification="portfolioDrifted" />
-        </Box>
+      {stakingNotifications.length > 0 && (
+        <Flex mb="$32" flexDirection="column">
+          <StakingNotificationBanners notifications={stakingNotifications} />
+        </Flex>
       )}
       <Box mb="$32">
         <DelegationCard

packages/staking/src/features/i18n/types.ts

@@ -4,15 +4,15 @@ import { getRandomIcon } from '@lace/common';
 import { Flex } from '@lace/ui';
 import BigNumber from 'bignumber.js';
 import cn from 'classnames';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import MoonIcon from '../../../assets/icons/moon.component.svg';
+import WarningIcon from '../../../assets/icons/warning.component.svg';
 import { TranslationKey } from '../../i18n';
-import MoonIcon from './moon.component.svg';
 import { StakePoolInfo } from './StakePoolInfo';
 import styles from './StakingInfoCard.module.scss';
 import { Stats } from './Stats';
 import { Tooltip } from './StatsTooltip';
-import WarningIon from './warning.component.svg';
 
 const DEFAULT_DECIMALS = 2;
 
@@ -34,7 +34,7 @@ const formatNumericValue = (
   </>
 );
 
-type PoolStatus = 'retired' | 'saturated';
+export type PoolStatus = 'retired' | 'saturated' | 'retiring';
 
 export type StakingInfoCardProps = {
   className?: string;
@@ -56,13 +56,15 @@ export type StakingInfoCardProps = {
   status?: PoolStatus;
 };
 
-const iconsByPoolStatus: Record<PoolStatus, React.FC<React.SVGProps<SVGSVGElement>>> = {
-  retired: MoonIcon,
-  saturated: WarningIon,
+const iconsByPoolStatus: Record<PoolStatus, ReactNode> = {
+  retired: <Icon style={{ color: '#FF8E3C', fontSize: '24px' }} component={MoonIcon} />,
+  retiring: <Icon style={{ color: '#FDC300', fontSize: '24px' }} component={MoonIcon} />,
+  saturated: <Icon style={{ color: '#FF5470', fontSize: '24px' }} component={WarningIcon} />,
 };
 
 const labelTranslationKeysByPoolStatus: Record<PoolStatus, TranslationKey> = {
   retired: 'overview.stakingInfoCard.poolRetired',
+  retiring: 'overview.stakingInfoCard.poolRetiring',
   saturated: 'overview.stakingInfoCard.poolSaturated',
 };
 
@@ -102,10 +104,8 @@ export const StakingInfoCard = ({
               id={id}
               onClick={onStakePoolSelect}
             />
-            {(status === 'retired' || status === 'saturated') && (
-              <Tooltip content={t(labelTranslationKeysByPoolStatus[status])}>
-                <Icon style={{ color: '#FF5470', fontSize: '24px' }} component={iconsByPoolStatus[status]} />
-              </Tooltip>
+            {(status === 'retired' || status === 'saturated' || status === 'retiring') && (
+              <Tooltip content={t(labelTranslationKeysByPoolStatus[status])}>{iconsByPoolStatus[status]}</Tooltip>
             )}
           </Flex>
         </div>